<template>
  <el-dialog 
    class="edit-dialog"
    :visible.sync="isVisible"
    :close-on-click-modal="false"
    :title="title"
    width="600px">
    <el-tree
      v-loading="treeLoading"
      ref="tree"
      :data="menuItems"
      show-checkbox
      node-key="id"
      :props="defaultProps">
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="isVisible=false">取 消</el-button>
      <el-button size="medium" type="primary" :loading="submitLoading" @click="editSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {saveRoleMenu, selectMenuTree, getRoleMenu} from '@/http/apiUrls.js';
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: 'SetRoleMenuForm',
  props: {
    // 弹窗显示
    dialogVisible: { type: Boolean, default: false},
    // 弹窗类型
    type: { type: String, default: "add" }
  },
  computed: {
    // 控制显示
    isVisible: {
      get() { 
        return this.dialogVisible; 
      },
      set() {
        this.$emit('close')
        this.editForm = this.initEditObj()
      }
    },
    // 标题
    title:{
      get(){
        return '配置权限'
      }
    }
  },
  data() {
    return {
      treeLoading: false,
      menuItems: [], // 菜单列表'
      allMenus: [],
      checkIds: [],
      submitLoading:false,
      editForm: this.initEditObj(),
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted(){
    this.getMenuItems()
  },
  created(){
    
  },
  methods: {
    // 修改传递值
    setEditObj(val) {
      console.log(val);
      this.editForm = {...val};
      this.getRoleMenuData(val.id);
    },
    getRoleMenuData(id){
      let url = getRoleMenu+id
      let leafIds = []
      this.$getJson(url).then(res => {
        if(res){
          let ids = res.map(m => m.menuId)
          this.$nextTick(()=>{
            for(let id of ids){
              let m = this.allMenus.find(item => item.id == id);
              if(m && (!m.children || m.children.length == 0)){
                leafIds.push(id)
              }
            }
            this.$refs.tree.setCheckedKeys(leafIds)
          })
        }
      })
    },
    // 重置值
    initEditObj(){
      return {
        code: "",
        name: ""
      }
    },
    // 获取所有菜单
    getMenuItems(){
      this.$postJson(selectMenuTree, {}).then(async res => {
        if(res){
          this.menuItems = res
          let menus = this.setAllMenus(res, [])
          this.allMenus = menus;
        }
      })
    },
    setAllMenus(items, menus){
      if(items && items.length > 0){
        items.map(item => {
          menus.push(item)
          if(item.children){
            this.setAllMenus(item.children, menus)
          }
        })
      }
      return menus
    },
    // 设置角色已选中菜单值
    setSelectRoles(val) {
      let ids = val;
      let leafIds = [];
      console.log('ids',ids);
      this.$nextTick(()=>{
        for(let id of ids){
          let m = this.allMenus.find(item => item.id == id);
          console.log('item',m.label);
          console.log('children',m.children);
          if(m && (!m.children || m.children.length == 0)){
            leafIds.push(id)
          }
        }
        console.log('leaf ids',leafIds);
        // this.$refs.tree.setCheckedKeys(leafIds)
      })
      // this.$refs.tree.setCheckedKeys(ids)
    },
    
    editSubmit(){
      let ids = [];
      let checkNodes = this.$refs.tree.getCheckedNodes(false, true);
      if(checkNodes && checkNodes.length > 0){
        for(let item of checkNodes){
          ids.push(item.id)
        }
      }
      
      if(ids.length < 1){
        console.log(this.checkIds);
        
        this.$message({
          type: "error",
          message: "请至少选择一个权限!",
        });
        return;
      }
      let requestData = {
        roleId: this.editForm.id,
        menuList: ids
      };
      console.log(requestData);
      this.submitLoading = true;
      this.$postJson(saveRoleMenu, requestData).then(res => {
        this.submitLoading = false;
        if(res){
          this.$message({
            type: "success",
            message: "权限配置成功!",
          });
          this.isVisible = false;
        }
      })
    }
  }
}
</script>
<style lang="scss">
.edit-dialog{
  .el-dialog__header{
    padding: 15px 20px 15px;
    .el-dialog__title{
      color: #fff;
    }

    i{
      color: #fff;
    }
    
    background-color: #006ACC;
  }

  .el-dialog__footer{
    padding: 15px 20px 15px;
    border-top: 1px solid #dfe4ea;
  }
}
</style>